<style>
  .forward-card {
    background: url(../../../assets/images/forward.png) no-repeat;
    background-size:100% 100%;
  }
  .read-card {
    background: url(../../../assets/images/read.png) no-repeat;
    background-size:100% 100%;
  }
  .traffic-card {
    background: url(../../../assets/images/traffic.png) no-repeat;
    background-size:100% 100%;
  }
  .forwardIcon {
    width: 131px;
    height: 94px;
    position: absolute;
    top: 43px;
    left: 10%;
  }
  .card-text {
    width: 120px;
    text-align: center;
    position: absolute;
    top: 61px;
    left: 55%;
    color: #fff;
  }
  .card-progress {
    width: 75%;
    position: absolute;
    top: 183px;
    left: 12%;
  }
  .progress-text {
    position: absolute;
    top: 155px;
    left: 12%;
    color: #fff;
    font-size: 15px;
  }
  .progress-percent {
    position: absolute;
    top: 153px;
    left: 174px;
    font-size: 18px;
    color: #fff;
  }
  .sale-img {
    width: 131px;
    position: absolute;
    top: 61px;
    left: 25%;
  }
  .sale-text {
    position: absolute;
    width: 144px;
    height: 24px;
    top: 80px;
    /* margin-left: 60%; */
    left: 55%;
  }
  .sale-data {
    background-color: rgba(86, 147, 255, 0.1);
    height: 138px;
    text-align: center;
  }
  .ivu-card-body {
    padding: 0px;
  }
  .ivu-progress-inner{
    background:rgba(214,214,214,0.64);
  }
</style>
<template>
  <div>
    <div style="margin-top: 20px; margin-left: 25px;">
      <!-- <Card> -->
        <!-- <div style="margin-left: 80px; font-size: 16px; margin-bottom: 10px;">影响力分析</div> -->
        <p style="font-size: 15px; font-weight: bold; border-left: 8px solid rgba(74, 74, 74, 1); padding-left: 10px;">影响力分析</p>
        <Row style="margin-left: 30px; height: 256px;">
          <Col span="8">
            <div class="forward-card" style="width: 95%; height: 256px">
              <img class="forwardIcon" src="../../../assets/images/forwardIcon.png" alt="">
              <div class="card-text">
                <span style="font-size: 17px;">
                今日转发量
                </span>
                <span style="font-szie: 13px;">(人)</span>
                <div style="font-size: 20px;">{{homeList.effect ? homeList.effect.today.sharecnt : '0'}}</div>
              </div>
              <div>
                <div class="progress-text">同比昨日增加</div>
                <div class="progress-percent">{{handlePercent(homeList.effect ? homeList.effect.today.sharecnt : 0, homeList.effect ? homeList.effect.yesterday.sharecnt : 0)}}%</div>
                <div class="card-progress">
                  <Progress hide-info  :percent="handlePercent(homeList.effect ? homeList.effect.today.sharecnt : 0, homeList.effect ? homeList.effect.yesterday.sharecnt : 0)" stroke-color="#FFFFFF" />
                </div>
              </div>
            </div>
          </Col>
          <Col span="8">
            <div class="read-card" style="width: 95%; height: 256px">
              <img class="forwardIcon" src="../../../assets/images/readIcon.png" alt="">
            </div>
            <div class="card-text">
                <span style="font-size: 17px;">
                今日阅读量
                </span>
                <span style="font-szie: 13px;">(人)</span>
                <div style="font-size: 20px;">{{homeList.effect ? homeList.effect.today.readcnt : '0'}}</div>
              </div>
              <div>
                <div class="progress-text">同比昨日增加</div>
                <div class="progress-percent">{{handlePercent(homeList.effect ? homeList.effect.today.readcnt : 0, homeList.effect ? homeList.effect.yesterday.readcnt : 0)}}%</div>
                <div class="card-progress">
                  <Progress hide-info  :percent="handlePercent(homeList.effect ? homeList.effect.today.readcnt : 0, homeList.effect ? homeList.effect.yesterday.readcnt : 0)" stroke-color="#FFFFFF" />
                </div>
              </div>
          </Col>
          <Col span="8">
            <div class="traffic-card" style="width: 95%; height: 256px">
              <img class="forwardIcon" src="../../../assets/images/trafficIcon.png" alt="">
              <div class="card-text">
                <span style="font-size: 17px;">
                  今日注册量
                </span>
                <span style="font-szie: 13px;">(元)</span>
                <div style="font-size: 20px;">{{homeList.effect ? homeList.effect.today.innums : '0'}}</div>
              </div>
              <div>
                <div class="progress-text">同比昨日增加</div>
                <div class="progress-percent">{{handlePercent(homeList.effect ? homeList.effect.today.moneycnt : 0, homeList.effect ? homeList.effect.yesterday.moneycnt : 0)}}%</div>
                <div class="card-progress">
                  <Progress hide-info  :percent="handlePercent(homeList.effect ? homeList.effect.today.moneycnt : 0, homeList.effect ? homeList.effect.yesterday.moneycnt : 0)" stroke-color="#FFFFFF" />
                </div>
              </div>
            </div>
          </Col>
        </Row>
        <!-- <div style="width: 100%; margin-left: 5%;">
          <Tag color="volcano" style="width: 30%; height: 60px; font-size: 15px; text-align: center; line-height: 60px;">今日传播任务人数：{{homeList.effect ? homeList.effect.sharecnt : '0'}}人</Tag>
          <Tag color="volcano" style="width: 30%; height: 60px; font-size: 15px; text-align: center; line-height: 60px;">今日影响人数：{{homeList.effect ? homeList.effect.readcnt : '0'}}人</Tag>
          <Tag color="volcano" style="width: 30%; height: 60px; font-size: 15px; text-align: center; line-height: 60px;">今日影响力流量费用：{{homeList.moneycnt ? homeList.effect.moneycnt : '0'}}元</Tag>
        </div> -->
      <!-- </Card> -->
    </div>
    <div style="margin-top: 20px; margin-left: 25px;">
       <p style="font-size: 15px; font-weight: bold; border-left: 8px solid rgba(74, 74, 74, 1); padding-left: 10px;">预约统计</p>
       <Card style="height: 390px; margin-top: 10px;">
         <Row>
           <Col span="12">
           <div style="width: 85%; height: 250px; cursor: pointer" @click="handleSale">
              <img class="sale-img" src="../../../assets/images/today.png" alt="">
              <div class="sale-text">
                <span style="font-size: 17px;">
                  今日预约人数
                </span>
                <div style="font-size: 20px; margin-top: 15px;">{{homeList.visit ? homeList.visit.todayvalue : '-'}}人</div>
              </div>
            </div>
           </Col>
           <div style="background: rgba(241, 241, 241, 1); width: 5px; height: 79px; position: absolute; top: 87px; left: 48%;"></div>
           <Col span="12">
            <div style="width: 85%; height: 250px; cursor: pointer" @click="handleTomorrow">
              <img class="sale-img" src="../../../assets/images/tomorrow.png" alt="">
              <div class="sale-text">
                <span style="font-size: 17px;">
                  明日预约人数
                </span>
                <div style="font-size: 20px; margin-top: 15px;">{{homeList.visit ? homeList.visit.aftervalue : '-'}}人</div>
              </div>
            </div>
           </Col>
         </Row>
         <Row>
           <Col span="8">
            <div class="sale-data">
              <div style="padding-top: 25px;">
                <span style="font-size: 17px;">
                历史总预约人数
                </span>
                <div style="font-size: 20px; margin-top: 15px;">
                  {{homeList.visit ? homeList.visit.allvalue : '-'}}人
                </div>
              </div>
            </div>
           </Col>
           <div style="background: rgba(255, 255, 255, 1); width: 5px; height: 79px; position: absolute; top: 27px; left: 30%;"></div>
           <Col span="8">
            <div class="sale-data">
              <div style="padding-top: 25px;">
                <span style="font-size: 17px;">
                  历史未到访人数
                </span>
                <div style="font-size: 20px; margin-top: 15px;">
                  {{homeList.visit ? homeList.visit.uncomevalue : '-'}}人
                </div>
              </div>
            </div>
           </Col>
           <div style="background: rgba(255, 255, 255, 1); width: 5px; height: 79px; position: absolute; top: 27px; left: 65%;"></div>
           <Col span="8">
            <div class="sale-data">
              <div style="padding-top: 25px;">
                <span style="font-size: 17px;">
                  历史到访人数
                </span>
                <div style="font-size: 20px; margin-top: 15px;">
                  {{homeList.visit ? homeList.visit.comevalue : '-'}}人
                </div>
              </div>
            </div>
           </Col>
         </Row>
       </Card>
    </div>
    <div style="margin-top: 20px; margin-left: 25px;">
      <p style="font-size: 15px; font-weight: bold; border-left: 8px solid rgba(74, 74, 74, 1); padding-left: 10px;">销售统计(元)</p>
      <Card style="margin-top: 20px;">
        <Row style="margin-top: 20px;">
          <Col span='3' style="text-align: center; font-size: 15px">近七日销售统计</Col>
          <Col span='20' style="text-align: right; font-size: 15px;">
            <span style="margin-right: 30px;">本日销售额：{{homeList.sale ? homeList.sale.values.dayCount : '-'}}元</span>
            <span style="margin-right: 30px;">本月销售金额：{{homeList.sale ? homeList.sale.values.monCount : '-'}}元</span>
            <span>总销售金额：{{homeList.sale ? homeList.sale.values.allCount : '-'}}元</span>
          </Col>
        </Row>
        <Row style="margin: 25px;">
          <Col span="24">
            <example style="height:400px" :value="homeSaleList" :name="saleName" />
          </Col>
        </Row>
      </Card>
    </div>
    <div style="margin-top: 20px; margin-left: 25px;">
      <p style="font-size: 15px; font-weight: bold; border-left: 8px solid rgba(74, 74, 74, 1); padding-left: 10px;">客户统计</p>
      <Card style="margin-top: 20px;">
        <Row style="margin-top: 20px;">
          <Col span='3' style="text-align: center; font-size: 15px">近七日客户统计</Col>
          <Col span='20' style="text-align: right; font-size: 15px;">
            <span style="margin-right: 30px;">本日新增客户：{{homeList.customer ? homeList.customer.values.dayCount : '-'}}人</span>
            <span style="margin-right: 30px;">本月新增客户：{{homeList.customer ? homeList.customer.values.monCount : '-'}}人</span>
            <span>总客户人数：{{homeList.customer ? homeList.customer.values.allCount : '-'}}人</span>
          </Col>
        </Row>
        <Row style="margin: 25px;">
         <bar style="height:400px" :color="customerColor" :value="homeCustomerList" :name="customerName" />
        </Row>
      </Card>
    </div>
    <div style="margin-top: 20px; margin-left: 25px;">
      <p style="font-size: 15px; font-weight: bold; border-left: 8px solid rgba(74, 74, 74, 1); padding-left: 10px;">员工销量排行 / 产品销量排行</p>
      <Card style="margin-top: 20px;">
        <Row style="margin: 25px;">
          <Col span="12">
            <Row>
              <Col span='6' style="text-align: center; font-size: 15px">本月员工销量</Col>
              <Col span='18' style="text-align: right; font-size: 15px;">
                <span style="margin-right: 45px;">本月销量最高员工：{{homeList.salerank ? homeList.salerank[0].mname : '-'}}</span>
              </Col>
            </Row>
            <bar style="height:400px; width: 100%" :value="homeSaleRankList" :name="saleRankName" :color="saleRankColor" />
          </Col>
          <Col span="12">
          <Row>
            <Col span='6' style="text-align: center; font-size: 15px">本月产品销量</Col>
            <Col span='18' style="text-align: right; font-size: 15px;">
              <span style="margin-right: 30px;">本月销量最高产品：{{homeList.productrank && homeList.productrank[0] ? homeList.productrank[0].name : '-'}}</span>
            </Col>
          </Row>
            <bar style="height:400px; width: 100%;" :value="homeProductRankList" :name="saleProductName" :color="productRankColor" />
          </Col>
        </Row>
      </Card>
    </div>
  </div>
</template>
<script>
import {
  mapActions,
  mapState,
  mapGetters
} from 'vuex'
import Example from '_c/example'
import Bar from '_c/bar'
import forward from '../../../assets/images/forward.png'
export default {
  components: {
    Example,
    Bar
  },
  data () {
    return {
      saleName: '销售金额',
      customerName: '新增人数',
      saleRankName: '员工销量',
      saleProductName: '产品销量',
      forward: forward,
      line: 'line',
      bar: 'bar',
      customerColor: 'rgba(248, 187, 18, 0.945)',
      saleRankColor: 'rgba(248, 125, 54, 0.945)',
      productRankColor: 'rgba(44, 132, 248, 0.945)'
    }
  },
  computed: {
    ...mapState({
      homeList: state => state.home.homeList
      // homeSaleList: state => state.home.homeSaleList,
      // homeCustomerList: state => state.home.homeCustomerList,
    }),
    ...mapGetters([
      'homeSaleList',
      'homeCustomerList',
      'homeSaleRankList',
      'homeProductRankList'
    ])
  },
  methods: {
    ...mapActions([
      'getHomeList', 'getConfigListData'
    ]),
    handlePercent (today, yesterday) {
      if (today === 0) {
        return 0
      }
      if (yesterday === 0) {
        return 100
      }
      if ((today - yesterday) === 0) {
        return 0
      }
      if ((today - yesterday) > 0 && yesterday > 0) {
        return parseFloat((((today - yesterday) / yesterday) * 100).toFixed(2))
      }
    },
    handleSale () {
      this.$router.push({
        name: 'appointment',
        params: {
          appointime: this.$moment(new Date()).format('YYYY-MM-DD')
        }
      })
    },
    handleTomorrow () {
      let day3 = new Date()
      day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000)
      let month = (day3.getMonth() + 1)
      let date = day3.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (date < 10) {
        date = '0' + date
      }
      let s3 = day3.getFullYear() + '-' + month + '-' + date
      this.$router.push({
        name: 'appointment',
        params: {
          appointime: s3
        }
      })
    }
  },
  async created () {
    await this.getHomeList({})
    await this.getConfigListData({})
  }
}
</script>
<style>

</style>
